<template>
  <div class="page">
    <s-header :name="'公示栏'" :back="'/government/home'"></s-header>
    <div class="dropdown-body">
      <van-dropdown-menu class="dropdown">
        <van-dropdown-item v-model="listQuery.proposedTown" :options="townsOptions" @change="changeToens" />
        <van-dropdown-item v-model="listQuery.proposedVillage" :options="villagesOptions" @change="onRefresh" />
      </van-dropdown-menu>
    </div>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="noticeList.length ? '没有更多了' : '暂无记录'"
          @load="onLoad"
          @offset="10"
        >
          <template v-if="noticeList.length">
            <div class="card-box">
              <div v-for="(item, index) in noticeList" :key="index" class="card-item" @click="goToDetail(item.id)">
                <div class="card-body">
                  <div class="body-title">
                    <div class="title">{{ item.applyName }}的建房公示</div>
                    <div :class="item.isPublicEnd ? 'finish' : ''" class="notice-status">
                      {{ item.isPublicEnd ? '公示完成' : `公示第${item.day || 1}天` }}
                    </div>
                  </div>
                  <ul class="apply-info">
                    <li>单号：{{ item.applyOrderNo }}</li>
                    <li>申请时间：{{ item.applyTime }}</li>
                    <li>拟建地址：{{ item.proposedLocationAddress }}</li>
                    <li>公示截止时间：{{ item.endTime }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <van-image v-else :src="listNull" class="empty" width="120" alt="搜索" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import sHeader from '@/components/SimpleHeader'
import { useRouter } from 'vue-router'
import { getNoticeList, findByParentCode } from '@/service/home'
import listNull from '@/assets/Images/list_null.png'
export default {
  components: {
    sHeader,
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      listNull: listNull,
      villagesOptions: [{ text: '请选择', value: '' }],
      noticeList: [],
      loading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 5,
        proposedTown: '',
        proposedVillage: '',
      },
      totalPage: 0,
      refreshing: false,
      finished: false,
    })

    // 获取字典数据
    store.dispatch('getTownOptions')

    onMounted(async () => {})

    // 查询公示
    const handleSearch = () => {
      getNoticeList(state.listQuery).then((res) => {
        const page = res.body.page
        state.noticeList = page.list
        state.totalPage = page.pageTotal
        state.loading = false
        if (state.listQuery.pageNo >= page.pageTotal) state.finished = true
      })
    }

    //获取公示列表
    const getDataList = async () => {
      getNoticeList(state.listQuery).then((res) => {
        const page = res.body.page
        state.noticeList = state.noticeList.concat(page.list)
        state.totalPage = page.pageTotal
        state.loading = false
        if (state.listQuery.pageNo >= page.pageTotal) state.finished = true
      })
    }

    // 加载列表
    const onLoad = () => {
      if (!state.refreshing && state.listQuery.pageNo < state.totalPage) {
        state.listQuery.pageNo = state.listQuery.pageNo + 1
      }
      if (state.refreshing) {
        state.noticeList = []
        state.refreshing = false
      }
      getDataList()
    }

    // 刷新列表
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.listQuery.pageNo = 1
      onLoad()
    }

    const goToDetail = (id) => {
      router.push({ path: `/government/notice-board/detail/${id}` })
    }

    // 选择乡镇
    const changeToens = (val) => {
      if (val) {
        findByParentCode({
          level: 5,
          parentCode: val,
        }).then((res) => {
          const list = res.body.list || []
          state.villagesOptions = list.map((v) => {
            return { text: v.regionName, value: v.regionCode }
          })
          state.villagesOptions.unshift({ text: '请选择', value: '' })
        })
      } else {
        state.listQuery.proposedVillage = ''
      }
      onRefresh()
    }

    const townsOptions = computed(() => {
      const list = store.state.townOptions
      let townsOptions = list.map((v) => {
        return { text: v.regionName, value: v.regionCode }
      })
      townsOptions.unshift({ text: '请选择', value: '' })
      return townsOptions
    })
    return {
      townsOptions,
      ...toRefs(state),
      changeToens,
      onLoad,
      onRefresh,
      getDataList,
      goToDetail,
      handleSearch,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  color: #2e3f6a;
  font-weight: 400;
  .dropdown-body {
    padding: 10px 0px 13px;
    .dropdown {
      border-radius: 10px;
      overflow: hidden;
    }
  }
  .body-title {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .notice-status {
      background: #3487f6;
      border-radius: 3px;
      color: #fff;
      font-size: 13px;
      font-weight: 400;
      padding: 4px 14px 5px;
    }
    .finish {
      background-color: #72c604;
    }
  }
  .apply-info {
    li {
      margin-top: 6px;
    }
  }
  .content {
    // height: calc(~'(100vh - 70px)');
    overflow: hidden;
    overflow-y: scroll;
    .empty {
      display: block;
      width: 150px;
      margin: 50px auto 20px;
    }
  }
}
</style>
